<template>
	<div>
		<div class="dynamicNav">
			<DynamicNav :navTitle="navTitle" />
		</div>
		<router-link to="dynamicState">
			<img class="leftArrow" src="../../../assets/images/dynamicState/37/f-1.png" alt="" />
		</router-link>
		
		<div class='pletterBody' v-for="(item,index) in systemData" :key="index">
			<div class="heaPortrait">
				<img :src="headImg" alt="" />
			</div>
			<div class="commentReply" >
				<div class="chitchat">
					<p>系统消息</p>
					<p>{{timeData[index]}}</p>
					<div>
						<span>{{item.systemData.content}}</span>
			            <img :src="nPicture" alt="" v-if="index == 0" />
					</div>
				</div>	
			</div>
		</div>

	</div>
</template>

<script>
	import DynamicNav from '../dynamicPublic/dynamicNav'
	export default {
		name:"systmInfo",
		data(){
			return{
				navTitle:"消息",
				nPicture: require("../../../assets/images/dynamicState/39/n.png"),
				systemData:[],
				timeData:["刚刚","2017/10/29","2017/10/28","2017/10/21","2017/10/18"],
				headImg: require("../../../assets/images/dynamicState/46/news.png"),				
			}
		},
		components:{
			DynamicNav
		},
		created(){
			this.$axios.get("http://localhost:3000/systemData")
			.then(res => {
				this.systemData = res.data.systemInfo
			})
			.catch(error => {
				console.log(error)
			})
		}
	}
</script>

<style scoped lang="less">
    @current: 100rem;
	.dynamicNav {
		height: 88/@current;
	}
	
	.leftArrow {
		position: fixed;
		top: 26/@current;
		left: 40/@current;
		z-index: 333;
		width: 22/@current;
	}
	.pletterBody {
		height: 200/@current;
		width: 100%;
		margin-top: 30/@current;
		overflow: hidden;
		.heaPortrait {
			float: left;
			position: relative;
			margin-left: 20/@current;
			img {
				width: 80/@current;
				height: 80/@current;
				border-radius: 50%;
				position: absolute;
				top: 0
			}
		}
		
		.commentReply {
			float: right;
			margin-right: 20/@current;
			margin-left:20/@current;
			width: 500/@current;
			position: relative;
			img {
				width: 500/@current;
			}
			.chitchat {
				position: absolute;
				left: 22/@current;
				width: 100%;
				p {
					font-size: 28/@current;
				}
				p:first-of-type {
					position: absolute;
					color: #313131;
				}
				p:nth-of-type(2) {
					font-size: 24/@current;
					position: absolute;
					right: 32/@current;
					color: #959595;
				}
				div{
					position:relative;
					margin-right:20/@current;
					padding-bottom:20/@current;
					border-bottom:1/@current solid #cfcdd3; ;
					  span{
					  	display:inline-block;
						margin-top: 60/@current;
						color: #1B1B1B;
						font-size: 32/@current;
						margin-right:32/@current;
						width:80%;
					  }
					  img{
					  	width:34/@current;
					  	position:absolute;
					  	top:70/@current;
					  	right:12/@current;
					  }
				}
			}
		}
	}



</style>